<template>
  <div class="Onecardtourdetails" ref="homePage">
    <van-nav-bar @click-left="clickleft" style="background: white;position: fixed;width: 100%;" title="一卡通详情" left-text="" left-arrow>
      <div slot="right" class="search">
      </div>
    </van-nav-bar>
    <div style="width: 100%;height: 46px;"></div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img width="100%" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="box">
      <div class="box_hotel">
        <div class="hotl_txt">
          <p class="hotel_name">隐居酒店苏州拙政园店</p>
          <p>一年全国306景区任性随意玩</p>
        </div>
        <div class="price">
          <s style="font-size: 15px;margin-left: 10px;">￥1500</s>
          <span style="color: #46d0ca;">￥1280</span>
        </div>
      </div>

    </div>
    <div class="signup">
      <van-button color="#46d0ca" type="default">立即报名</van-button>
    </div>
    <div id="menus" class="box2">
      <div @click="gotoShow('notice')" :class="[isSelectedItem[0] ? 'active' : '' ,'menu-item']">预定须知</div>
      <div @click="gotoShow('feiyong')" :class="[isSelectedItem[1] ? 'active' : '' ,'menu-item']">费用说明</div>
      <!-- <div @click="gotoShow('special')" :class="[isSelectedItem[2] ? 'active' : '' ,'menu-item']">特色</div> -->
    </div>

    <div class="blank" id="blank" style="display: none;"></div>
    <div id="notice" class="product-content">
      <div>
        <p><b>预定须知</b><b></b></p>
        <p>【预定说明】为确保入住顺利，预订时请务必填写真实姓名、手机号码、身份证等信息</p>
        <p>【预订须知】</p>
        <p><span style="color:#E53333;"><strong>下单前请咨询客服是否有房，有房即可预订</strong></span></p>
        <p>【<span>入住方式</span>】</p>
        <p>前台报姓名以及手机号办理入住</p>
        <p>【入住限制】</p>
        <p><span>入住时间以客人当日入住为准，离店时间为次日中午</span>12点</p>
        <p>【退改规则】</p>
        <p>本产品为特价产品，一经预订，不退不改，请预订前合理安排自己的行程，<strong>如需开发票请致电客服。</strong><strong></strong></p>
        <p><span>【周边设施】</span></p>
        <p>观前街/平江路/十全街/市中心&nbsp;石路/山塘街商业区</p>
        <p>【温馨提示】</p>
        <p><span>不接受</span>18岁以下客人单独入住。</p>
      </div>
    </div>
    <div id="feiyong" class="product-content">
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div><div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
      <div>
        <p>【费用包含】</p>
        <p>心享豪华大床房一晚住宿（含早）</p>
        <p>【费用不含】</p>
        <p>除费用包含外的所有个人消费</p>
      </div>
    </div>


  </div>
</template>

<script>
  import search from '../search.vue'
  export default {
    components: {
      "v-search": search,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度
        isSelectedItem: [true, false, false], //切换
        images: [
          'https://resource.sz-trip.com/uploads/20190325/964b4e07f4021b0d92258ba5289a380e.png',
          'https://resource.sz-trip.com/uploads/20190321/2cb61c671f87950bc551b08a2ba124c3.png',
          'https://resource.sz-trip.com/uploads/20190321/66dd1811c1bfe35e2d15c86ce71d35da.png'
        ]
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    created() {
      let that = this;
      window.onscroll = function() {
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (document.getElementById('feiyong')) {
          //这里是控制的是导航的隐藏固定跟动态滚动的
          if (scrollTop < document.getElementById('notice').offsetTop - 40 - document.getElementById('menus').offsetHeight) {
            // console.log(1)
            document.getElementById('menus').setAttribute('class', 'box2')
            document.getElementById('blank').style.display = 'none';
          } else {
            document.getElementById('menus').setAttribute('class', 'box2 menus-top')
            document.getElementById('blank').style.display = 'block';
          }
          if (scrollTop > document.getElementById('feiyong').offsetTop - 50 - document.getElementById('menus')
            .offsetHeight) {
            that.isSelectedItem = [false, true];
          } else {
            that.isSelectedItem = [true, false];
          }
        }
      }
    },
    methods: {
      gotoShow: function(id) {
        var obj = document.getElementById(id);
        var total = obj.offsetTop - 10
        if (id === 'feiyongZhuan' || id === 'noticeZhuan') {
          var a = document.getElementById('menusZhuan').offsetHeight;
          document.getElementById('menusZhuan').setAttribute('class', 'box2 menus-top')
          document.getElementById('blankZhuan').style.display = 'block';
          total = total - a + 1;
        }
        document.body.scrollTop = total;
        document.documentElement.scrollTop = total;
        document.pageYOffset = total;
      },
      Hotelorders() {
        this.$router.push({ //跳转订单详情
          path: "/Hotel/Hotelorders",
          // query: {
          //   id: id,
          // }
        })
      },
      clickleft(){
        this.$router.go(-1)
      },
    },
  }
</script>

<style lang="scss">
  .Onecardtourdetails {
    .van-swipe {
      .van-swipe__indicators {
        .van-swipe__indicator--active {
          background-color: #46d0ca !important;
        }
      }
    }
    .van-nav-bar{
      .van-nav-bar__left{
        .van-icon{
          color: #46d0ca !important;
          font-size: 20px;
        }
      }
      .van-nav-bar__title{
        color: #000000 !important;
      }
    }
    .box {
      display: flex;
      width: 100%;
      height: 80px;
      background: #FFFFFF;
      justify-content: space-between;
      .box_hotel{
        display: flex;
        width: 95%;
        margin: 0 auto;
        // height: 100px;
        justify-content: space-between;
        // flex-direction: column;
        .hotl_txt{
          .hotel_name{
            font-size: 18px;
            padding: 10px 0;
          }
        }

        .phone{
          width: 100%;
          display: flex;
          // align-items: center;
          padding: 1px 10px;
          font-size: 12px;
          color: #555555;
          span{
            margin-right: 5px;
          }
        }
        .price{
          display: flex;
          flex-direction: column;
          font-size: 20px;
          padding: 15px 10px;
        }
      }

    }
    .signup{
      position: fixed;
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: 0;
      background: white;
      button{
        height: 35px;
        width: 120px;
        line-height: 35px;
        border-radius: 5px;
      }
    }
    .menus-top {
      position: fixed;
      top: 46px;
      width: 100%;
      margin-top: 0;
      background-color: #f6f6f6;
    }

    .box2 {
      // margin-top: 0.625rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      .menu-item {
        width: 50%;
        line-height: 40px;
        font-size: 14px;
        background: #FFFFFF;
        // border-top: 0.0625rem solid #eee;
        // border-bottom: 0.0625rem solid #eee;
        // border-right: 0.0625rem solid #eee;
        text-align: center;
      }

      .active {
        background: #46d0ca;
        color: #FFFFFF;
      }
    }

    .product-content {
      margin-top: 0.3125rem;
      background: #FFFFFF;
      padding: 0 0.625rem;
      color: #868686;
      font-size: 0.75rem;
      line-height: 1.25rem;
      padding-bottom: 1.25rem;

      img {
        width: 100%;
        display: block;
      }
    }


  }
</style>
